/**
 * @file /FeatureList.js
 * @author
 */
import React, { PropTypes, PureComponent } from 'react';
import { Table, Input } from 'antd';
import { autobind } from 'core-decorators';

import featureListColumns from './featureListColumns';
import TablePagination from '../common/TablePagination';

const Search = Input.Search;

const styles = {
  date: {
    color: '#888',
    float: 'right',
    paddingRight: 10,
    fontSize: 12,
  },
};

export default class FeatureList extends PureComponent {

  static propTypes = {
    list: PropTypes.array.isRequired,
    onRowClick: PropTypes.func,
  }

  static defaultProps = {
  }

  // 排序
  @autobind
  handleTableChange(page, filters, sorter) {
    const { location: { query }, replace } = this.props;
    replace({
      pathname: '/fdtAnalysis/retailEducation',
      query: {
        ...query,
        sortField: sorter.field,
        sortOrder: sorter.order,
      },
    });
  }

  // 分页
  @autobind
  handleChangePage(page, pagesize) {
    const { location: { query }, replace } = this.props;
    replace({
      pathname: '/fdtAnalysis/retailEducation',
      query: {
        ...query,
        currentpage: page,
      },
    });
  }
  handleSearch = (value) => {
    const { location: { query }, replace } = this.props;
    replace({
      pathname: '/fdtAnalysis/retailEducation',
      query: {
        ...query,
        trader: value,
        currentpage: 1,
      },
    });
  }
  render() {
    const { featuresMapping, dataDate, list, onRowClick, location: { query: { currentpage } } } = this.props;
    const columns = featureListColumns(featuresMapping);

    return (
      <div>
        <div style={{ padding: '10px' }}>
          <Search
            placeholder="查找用户"
            style={{ width: 200 }}
            onSearch={this.handleSearch}
          />
          <span style={styles.date}>数据日期：{dataDate}</span>
        </div>
        <Table
          rowKey={record => (record.trader + record.dataDate)}
          size="middle"
          columns={columns}
          dataSource={list}
          pagination={false}
          onChange={this.handleTableChange}
          onRowClick={(record, index, e) => { onRowClick && onRowClick(record); }}
        />
        <TablePagination {...this.props} />
      </div>
    );
  }
}
